import { useState } from 'react';
import './App.css';

function App() {
  const [activeTab, setActiveTab] = useState('overview');
  const [editMode, setEditMode] = useState(false);

  return (
    <div className="app">
      <header className="header">
        <div className="header-content">
          <h1>长沙四天三晚旅游攻略</h1>
          <p className="subtitle">凌晨三点到长沙站，四天三晚，晚上十一点长沙站返程</p>
        </div>
      </header>

      <nav className="nav">
        <ul>
          <li className={activeTab === 'overview' ? 'active' : ''} onClick={() => setActiveTab('overview')}>行程概览</li>
          <li className={activeTab === 'day1' ? 'active' : ''} onClick={() => setActiveTab('day1')}>第一天</li>
          <li className={activeTab === 'day2' ? 'active' : ''} onClick={() => setActiveTab('day2')}>第二天</li>
          <li className={activeTab === 'day3' ? 'active' : ''} onClick={() => setActiveTab('day3')}>第三天</li>
          <li className={activeTab === 'day4' ? 'active' : ''} onClick={() => setActiveTab('day4')}>第四天</li>
          <li className={activeTab === 'food' ? 'active' : ''} onClick={() => setActiveTab('food')}>特色美食</li>
          <li className={activeTab === 'tips' ? 'active' : ''} onClick={() => setActiveTab('tips')}>温馨提示</li>
        </ul>
      </nav>

      <main className="content">
        {activeTab === 'overview' && (
          <div className="overview-section">
            <h2>长沙四天三晚行程概览</h2>
            <div className="overview-cards">
              <div className="day-card">
                <div className="day-header day1-header">第一天</div>
                <div className="day-content">
                  <p>五一广场 → IFS国金中心 → 黄兴步行街 → 南门口 → 杜甫江阁 → 文和友 → 太平老街 → 黄兴铜像</p>
                  <p className="day-theme">主题：市中心商业区探索 + 美食之旅</p>
                </div>
              </div>
              <div className="day-card">
                <div className="day-header day2-header">第二天</div>
                <div className="day-content">
                  <p>橘子洲头 → 岳麓山 → 爱晚亭 → 岳麓书院 → 湖南大学 → 河西大学城小吃街</p>
                  <p className="day-theme">主题：人文历史 + 自然风光</p>
                </div>
              </div>
              <div className="day-card">
                <div className="day-header day3-header">第三天</div>
                <div className="day-content">
                  <p>潮宗街(志明家常菜) → 古开福寺 → 省博物馆 → 烈士公园 → 四方坪夜市</p>
                  <p className="day-theme">主题：历史文化 + 休闲美食</p>
                </div>
              </div>
              <div className="day-card">
                <div className="day-header day4-header">第四天</div>
                <div className="day-content">
                  <p>南门口早市 → 谢子龙影像艺术馆 → 李自健美术馆 → 天宝兄弟 → 万家丽顶楼日落&扬帆夜市 → 返程</p>
                  <p className="day-theme">主题：文化艺术 + 美食购物</p>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'day1' && (
          <div className="day-section">
            <h2>第一天行程</h2>
            <div className="vertical-timeline">
              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/wuyi_square.jpeg" alt="五一广场" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>五一广场</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>全天</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>长沙市中心地标，商业中心</p>
                      <p>周边购物中心林立，吃喝玩乐一应俱全</p>
                      <p>地铁交通便利，是游览长沙的理想起点</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行7分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/ifs_center.jpeg" alt="IFS国金中心" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>IFS国金中心</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>10:00-22:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>顶楼Kaws台景，一张图证明来过长沙</p>
                      <p>高端购物中心，国际品牌云集</p>
                      <p>观景台可俯瞰长沙全景</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行3分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/huangxing_road.jpeg" alt="黄兴步行街" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>黄兴步行街</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>全天</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>长沙最繁华的商业步行街</p>
                      <p>笨萝卜浏阳菜馆值得一试</p>
                      <p>各类小吃、特产和时尚品牌云集</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行12分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/nanmenkou.jpeg" alt="南门口" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>南门口</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>全天</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>金记糖油粑粑（五块一串的炸糯米团，糯叽叽拉丝感）</p>
                      <p>阳记紫苏桃子、文庙坪炸炸炸</p>
                      <p>早市小吃丰富多样</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行10分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/dufu_jianglou.jpeg" alt="杜甫江阁" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>杜甫江阁</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>9:00-17:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>纪念唐代诗人杜甫的文化景点</p>
                      <p>古典园林风格，环境幽静</p>
                      <p>可欣赏杜甫在长沙期间的诗作</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行8分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/wenhe_you.jpeg" alt="文和友" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>文和友</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>10:00-22:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>网红打卡地，复古怀旧风格</p>
                      <p>小龙虾、臭豆腐等长沙特色美食</p>
                      <p>北门出直达坡子街，交通便利</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行10分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/taiping_street.jpeg" alt="太平老街" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>太平老街</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>全天</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>湘文化街区，长沙人间烟火气</p>
                      <p>各类特色小吃和手工艺品</p>
                      <p>古色古香的建筑风格</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行10分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/huangxing_statue.jpeg" alt="黄兴铜像" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>黄兴铜像</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>全天</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>纪念辛亥革命领袖黄兴的铜像</p>
                      <p>紧邻五一广场地铁口，交通便利</p>
                      <p>周边夜景灯光璀璨</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'day2' && (
          <div className="day-section">
            <h2>第二天行程</h2>
            <div className="vertical-timeline">
              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/orange_isle.jpeg" alt="橘子洲头" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>橘子洲头</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>全天</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>湘江中的沙洲，毛主席诗词《沁园春·长沙》的创作地</p>
                      <p>可乘坐渡轮前往，体验江上风光</p>
                      <p>晚上有灯光秀，景色壮观</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">乘车15分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/yuelu_mountain.jpeg" alt="岳麓山" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>岳麓山</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>全天</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>国家5A级景区，自然风光与人文景观</p>
                      <p>登高远眺，可俯瞰长沙全景</p>
                      <p>山中古树参天，环境清幽</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行6分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/aiwan_pavilion.jpeg" alt="爱晚亭" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>爱晚亭</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>全天</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>岳麓山中著名景点，"停车坐爱枫林晚"</p>
                      <p>秋季红枫满山，景色绝佳</p>
                      <p>中国四大名亭之一</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行3分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/yuelu_academy.jpeg" alt="岳麓书院" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>岳麓书院</h3>
                      <p><span className="info-label">门票：</span>60元</p>
                      <p><span className="info-label">时间：</span>8:00-17:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>千年学府，中国古代四大书院之一</p>
                      <p>保存完好的古代教育建筑群</p>
                      <p>可了解中国传统教育文化</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行5分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/hunan_university.jpeg" alt="湖南大学" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>湖南大学</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>8:00-17:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>千年学府，校园环境优美</p>
                      <p>古今建筑交相辉映</p>
                      <p>中国最美大学校园之一</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行11分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/hexi_food_street.jpeg" alt="河西大学城小吃街" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>河西大学城小吃街</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>10:00-22:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>大学城周边美食聚集地</p>
                      <p>价格亲民，种类丰富</p>
                      <p>体验当地大学生的美食文化</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'day3' && (
          <div className="day-section">
            <h2>第三天行程</h2>
            <div className="vertical-timeline">
              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/chaozong_street.jpeg" alt="潮宗街" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>潮宗街（志明家常菜）</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>10:00-22:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>志明家常菜是当地知名餐厅</p>
                      <p>正宗湘菜，口味地道</p>
                      <p>潮宗街是长沙新兴的美食街区</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">501路南线6站8分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/kaifu_temple.jpeg" alt="古开福寺" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>古开福寺</h3>
                      <p><span className="info-label">门票：</span>免费（香火自愿）</p>
                      <p><span className="info-label">时间：</span>8:00-17:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>长沙历史悠久的佛教寺庙</p>
                      <p>建筑古朴，环境清幽</p>
                      <p>可体验传统佛教文化</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">282路4站11分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/hunan_museum.jpeg" alt="湖南省博物馆" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>省博物馆</h3>
                      <p><span className="info-label">门票：</span>免费（需预约）</p>
                      <p><span className="info-label">时间：</span>9:00-17:00（周一闭馆）</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>湖南历史文化精华，马王堆文物展示</p>
                      <p>馆藏丰富，展览精彩</p>
                      <p>了解湖南历史文化的重要场所</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">步行8分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/martyrs_park.jpeg" alt="烈士公园" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>烈士公园</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>全天</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>纪念革命烈士的公园</p>
                      <p>环境优美，绿树成荫</p>
                      <p>市民休闲娱乐的好去处</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">367/203路7站10分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/sifangping_market.jpeg" alt="四方坪夜市" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>四方坪夜市</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>17:00-24:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>当地人气夜市，美食种类丰富</p>
                      <p>体验长沙夜生活的好去处</p>
                      <p>价格亲民，氛围热闹</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'day4' && (
          <div className="day-section">
            <h2>第四天行程</h2>
            <div className="vertical-timeline">
              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/nanmenkou_market.jpeg" alt="南门口早市" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>南门口早市</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>6:00-10:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>长沙传统早市，当地特色早餐</p>
                      <p>金记糖油粑粑、阳记紫苏桃子等特色小吃</p>
                      <p>体验当地人的早晨生活</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">乘车15分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/xiezilong_museum.jpeg" alt="谢子龙影像艺术馆" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>谢子龙影像艺术馆</h3>
                      <p><span className="info-label">门票：</span>免费（需预约）</p>
                      <p><span className="info-label">时间：</span>10:00-17:30（周一闭馆）</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>中国首家私人影像艺术馆</p>
                      <p>展出国内外优秀摄影作品</p>
                      <p>建筑设计独特，环境雅致</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">乘车20分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/lijian_museum.jpeg" alt="李自健美术馆" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>李自健美术馆</h3>
                      <p><span className="info-label">门票：</span>60元</p>
                      <p><span className="info-label">时间：</span>9:00-17:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>展出著名画家李自健的作品</p>
                      <p>超写实主义绘画风格</p>
                      <p>艺术氛围浓厚</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">乘车15分钟</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/tianbao_brothers.jpeg" alt="天宝兄弟" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>天宝兄弟（汇景城店）</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>10:00-22:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>长沙知名餐厅，小龙虾特别推荐</p>
                      <p>汇景城店环境优雅</p>
                      <p>适合午餐就餐</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">地铁直达</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-image">
                    <img src="/images/attractions/wanjialibuilding.jpeg" alt="万家丽顶楼日落" />
                  </div>
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>万家丽顶楼日落&扬帆夜市</h3>
                      <p><span className="info-label">门票：</span>免费</p>
                      <p><span className="info-label">时间：</span>17:00-22:00</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>景点亮点</h3>
                      <p>观赏长沙日落的绝佳地点</p>
                      <p>扬帆夜市美食种类丰富</p>
                      <p>体验长沙夜生活</p>
                    </div>
                  </div>
                </div>
                <div className="timeline-connector">
                  <div className="connector-line"></div>
                  <div className="connector-text">地铁直达</div>
                </div>
              </div>

              <div className="timeline-item">
                <div className="timeline-content">
                  <div className="timeline-info-container">
                    <div className="timeline-info-left">
                      <h3>长沙站返程</h3>
                      <p><span className="info-label">时间：</span>晚上11点</p>
                    </div>
                    <div className="timeline-info-right">
                      <h3>温馨提示</h3>
                      <p>建议提前2小时到达火车站</p>
                      <p>可在车站附近购买伴手礼</p>
                      <p>注意保管好随身物品</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'food' && (
          <div className="food-section">
            <h2>长沙特色美食</h2>
            <div className="food-grid">
              <div className="food-card">
                <div className="food-image">
                  <img src="/images/food/chayan_yueshe.jpeg" alt="茶颜悦色" />
                </div>
                <div className="food-info">
                  <h3>茶颜悦色 <span className="spicy-level">辣度：无</span></h3>
                  <p>长沙网红奶茶品牌，遍地开花。推荐筝筝纸鸢和少年时，口感清爽不腻。</p>
                  <p><strong>推荐地点：</strong>五一广场、太平街、IFS国金中心（长沙遍地都是）</p>
                </div>
              </div>

              <div className="food-card">
                <div className="food-image">
                  <img src="/images/food/gudemoling.jpeg" alt="古德莫宁" />
                </div>
                <div className="food-info">
                  <h3>古德莫宁 <span className="spicy-level">辣度：无</span></h3>
                  <p>长沙知名咖啡品牌，环境优雅，咖啡品质高。</p>
                  <p><strong>推荐地点：</strong>五一广场、IFS国金中心等多家分店</p>
                </div>
              </div>

              <div className="food-card">
                <div className="food-image">
                  <img src="/images/food/changsha_rice_noodle.jpeg" alt="长沙米粉" />
                </div>
                <div className="food-info">
                  <h3>公交新村粉店 <span className="spicy-level">辣度：🌶️🌶️（可调）</span></h3>
                  <p>长沙米粉推荐赶早吃头汤，推荐雪里蕻牛肉粉，加免费剁椒、酸豆角，扁粉比圆粉更挂汤。</p>
                  <p><strong>推荐地点：</strong>坡子街</p>
                </div>
              </div>

              <div className="food-card">
                <div className="food-image">
                  <img src="/images/food/stinky_tofu.jpeg" alt="黑色经典臭豆腐" />
                </div>
                <div className="food-info">
                  <h3>黑色经典臭豆腐 <span className="spicy-level">辣度：🌶️🌶️🌶️</span></h3>
                  <p>外酥里嫩，色泽黑亮，闻起来臭吃起来香。坡子街的分店最为正宗。</p>
                  <p><strong>推荐地点：</strong>坡子街</p>
                </div>
              </div>

              <div className="food-card">
                <div className="food-image">
                  <img src="/images/food/tangyou_baba.jpeg" alt="金记糖油粑粑" />
                </div>
                <div className="food-info">
                  <h3>金记糖油粑粑 <span className="spicy-level">辣度：无</span></h3>
                  <p>五块一串的炸糯米团，糯叽叽拉丝感，是长沙传统小吃。</p>
                  <p><strong>推荐地点：</strong>南门口</p>
                </div>
              </div>

              <div className="food-card">
                <div className="food-image">
                  <img src="/images/food/yangji_peach.jpeg" alt="阳记紫苏桃子" />
                </div>
                <div className="food-info">
                  <h3>阳记紫苏桃子 <span className="spicy-level">辣度：无</span></h3>
                  <p>南门口特色小吃，外形似桃，口感独特。</p>
                  <p><strong>推荐地点：</strong>南门口</p>
                </div>
              </div>

              <div className="food-card">
                <div className="food-image">
                  <img src="/images/food/haofugui.jpeg" alt="郝富贵小炒肉" />
                </div>
                <div className="food-info">
                  <h3>郝富贵小炒肉 <span className="spicy-level">辣度：🌶️🌶️🌶️</span></h3>
                  <p>五一广场知名餐厅，饭点排队一小时，小炒肉是招牌菜。</p>
                  <p><strong>推荐地点：</strong>五一广场</p>
                </div>
              </div>

              <div className="food-card">
                <div className="food-image">
                  <img src="/images/food/benluobo.jpeg" alt="笨萝卜浏阳菜馆" />
                </div>
                <div className="food-info">
                  <h3>笨萝卜浏阳菜馆 <span className="spicy-level">辣度：🌶️🌶️🌶️</span></h3>
                  <p>黄兴步行街的知名餐厅，提供正宗浏阳风味菜肴。</p>
                  <p><strong>推荐地点：</strong>黄兴步行街</p>
                </div>
              </div>

              <div className="food-card">
                <div className="food-image">
                  <img src="/images/food/crayfish.jpeg" alt="小龙虾" />
                </div>
                <div className="food-info">
                  <h3>文和友/天宝兄弟小龙虾 <span className="spicy-level">辣度：🌶️🌶️🌶️🌶️</span></h3>
                  <p>长沙最有名的小龙虾，麻辣鲜香，肉质鲜嫩。文和友和天宝兄弟都是不错的选择。</p>
                  <p><strong>推荐地点：</strong>文和友、天宝兄弟（汇景城店）</p>
                </div>
              </div>

              <div className="food-card">
                <div className="food-image">
                  <img src="/images/food/zhiming.jpeg" alt="志明家常菜" />
                </div>
                <div className="food-info">
                  <h3>志明家常菜 <span className="spicy-level">辣度：🌶️🌶️（可调）</span></h3>
                  <p>潮宗街知名餐厅，提供正宗湘菜家常菜，口味地道。</p>
                  <p><strong>推荐地点：</strong>潮宗街</p>
                </div>
              </div>
            </div>

            <div className="souvenirs-section">
              <h2>长沙特色伴手礼</h2>
              <div className="food-grid">
                <div className="food-card">
                  <div className="food-image">
                    <img src="/images/food/baisha_duck.jpeg" alt="白沙虎辣酱鸭" />
                  </div>
                  <div className="food-info">
                    <h3>白沙虎辣酱鸭</h3>
                    <p>五一广场特色伴手礼，香辣可口，真空包装便于携带。</p>
                    <p><strong>购买地点：</strong>五一广场</p>
                  </div>
                </div>

                <div className="food-card">
                  <div className="food-image">
                    <img src="/images/food/tiger_chili.jpeg" alt="甜老虎辣椒酱" />
                  </div>
                  <div className="food-info">
                    <h3>甜老虎辣椒酱</h3>
                    <p>长沙特色辣椒酱，甜中带辣，可作为调味品或佐餐食用。</p>
                    <p><strong>购买地点：</strong>五一广场</p>
                  </div>
                </div>

                <div className="food-card">
                  <div className="food-image">
                    <img src="/images/food/xiangembroidery.jpeg" alt="湘绣" />
                  </div>
                  <div className="food-info">
                    <h3>湘绣</h3>
                    <p>湖南传统工艺品，精美绝伦，可选择小型装饰画或手帕等实用物品。</p>
                    <p><strong>购买地点：</strong>湖南省博物馆、太平老街</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'tips' && (
          <div className="tips-section">
            <h2>温馨提示</h2>
            
            <div className="tips-card">
              <h3>必备APP</h3>
              <ul>
                <li><strong>出行类：</strong>高德地图/百度地图、长沙地铁、滴滴出行</li>
                <li><strong>支付类：</strong>支付宝、微信支付</li>
                <li><strong>美食类：</strong>大众点评/美团</li>
                <li><strong>购票类：</strong>携程/去哪儿（景点预约）</li>
              </ul>
            </div>

            <div className="tips-card">
              <h3>必备物品</h3>
              <ul>
                <li><strong>证件：</strong>身份证、银行卡、少量现金</li>
                <li><strong>电子设备：</strong>手机、充电宝、相机</li>
                <li><strong>药品：</strong>常用药品、创可贴、消毒湿巾</li>
                <li><strong>其他：</strong>遮阳伞、防晒霜、墨镜（夏季）</li>
              </ul>
            </div>

            <div className="tips-card">
              <h3>2025年6月3日-6月6日天气预报</h3>
              <div className="weather-forecast">
                <div className="weather-day">
                  <p className="weather-date">6月3日</p>
                  <p className="weather-icon">☀️</p>
                  <p className="weather-temp">25°C-32°C</p>
                  <p>晴</p>
                </div>
                <div className="weather-day">
                  <p className="weather-date">6月4日</p>
                  <p className="weather-icon">⛅</p>
                  <p className="weather-temp">24°C-30°C</p>
                  <p>多云</p>
                </div>
                <div className="weather-day">
                  <p className="weather-date">6月5日</p>
                  <p className="weather-icon">🌧️</p>
                  <p className="weather-temp">23°C-28°C</p>
                  <p>小雨</p>
                </div>
                <div className="weather-day">
                  <p className="weather-date">6月6日</p>
                  <p className="weather-icon">⛅</p>
                  <p className="weather-temp">24°C-29°C</p>
                  <p>多云</p>
                </div>
              </div>
              <p><strong>穿衣建议：</strong>以夏季轻薄衣物为主，建议携带一件薄外套应对雨天和室内空调。6月5日有雨，记得带伞。</p>
            </div>

            <div className="tips-card">
              <h3>交通提示</h3>
              <ul>
                <li>长沙地铁覆盖主要景点，单程票价2-8元不等</li>
                <li>公交车票价2元，可使用支付宝或微信扫码支付</li>
                <li>从长沙站到慕云酒店(五一广场店)可乘坐地铁2号线，约20分钟</li>
                <li>景点间可使用滴滴打车或共享单车</li>
                <li>公交运营时间一般为早6晚9，请合理安排行程</li>
              </ul>
            </div>

            <div className="tips-card">
              <h3>饮食提示</h3>
              <ul>
                <li>湖南菜普遍较辣，点菜时可要求"微辣"或"不辣"</li>
                <li>夏季天气炎热，注意补充水分</li>
                <li>街边小吃注意卫生，选择人流量大的店铺</li>
                <li>推荐尝试当地特色早餐：米粉、糖油粑粑</li>
                <li>长沙米粉推荐赶早吃头汤，口感更佳</li>
              </ul>
            </div>
          </div>
        )}
      </main>

      <div className="edit-mode-toggle" onClick={() => setEditMode(!editMode)}>
        {editMode ? '退出编辑' : '编辑模式'}
      </div>

      <footer className="footer">
        <p>长沙四天三晚旅游攻略 | 2025年6月3日-6月6日</p>
      </footer>
    </div>
  );
}

export default App;
